<template>
  <div class="statical_report">
    <!-- 条件筛查部分 -->
    <el-row>
      <el-col>
        <el-form ref="form" :model="form" inline :size="size">
          <el-form-item>
            <el-date-picker
              v-model="form.startTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择开始选日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>至</el-form-item>
          <!-- <span>至</span> -->
          <el-form-item>
            <el-date-picker
              v-model="form.finishTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择结束选日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-select v-model="form.classification" placeholder="请选择分类" clearable>
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-select v-model="form.source" placeholder="请选择来源">
              <el-option
                v-for="item in sourceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleTableData">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 条件筛查部分end -->
    <!-- tab条件部分 -->
    <el-row>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane
          v-for="(item, index) in tabOption"
          :key="index"
          :label="item.name"
          :name="item.status"
          :code="item.code"></el-tab-pane>
      </el-tabs>
    </el-row>
    <!-- tab条件部分end -->
    <!-- 标题部分 -->
    <el-row class="statical_title">
      <el-col style="text-align: center; margin-bottom: 10px;">
        <h2 style="margin: 0;">重庆市陈家桥医院</h2>
        <span style="font-size: 14px;">传染病{{title}}
          <span v-if="show">( {{this.form.startTime}} 至 {{this.form.finishTime}} )</span>
        </span>
      </el-col>
      <span class="statical_button">
        <el-button :size="size" :plain="plain1" type="primary" icon="el-icon-menu" @click="handleTableShow()">统计表</el-button>
        <el-button :size="size" :plain="plain2" type="primary" icon="el-icon-s-data" @click="handleEchartShow()">统计图</el-button>
        <el-button :size="size" type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
      </span>
    </el-row>
    <!-- 标题部分end -->
    <!-- 表格部分 -->
    <el-row style="height: 100%;">
      <el-col v-if="isShowTable">
        <cs-table :table-data="tableData"
                  :table-label="tableLabelType"
                  @handleButton="handleButton"
                  :maxHeight="500"
                  :loading="loading"
                  :isSelection="isSelection"
                  :table-option="tableOption">
          <template slot="classificationName" slot-scope="scope">
            <span>{{scope.row.classificationName === '1' ? '男' : '女'}}</span>
          </template>
          <template slot="diseaseProportion" slot-scope="scope">
            <span>{{scope.row.diseaseProportion === 'NaN%' ? '0' : scope.row.diseaseProportion}}</span>
          </template>
        </cs-table>
      </el-col>
      <el-col v-if="isShowEchart" style="height: 100%;">
        <report-echart :StatisticsData="StatisticsData" :title="title"></report-echart>
      </el-col>
    </el-row>
    <!-- 表格部分end -->
  </div>
</template>

<script>
import {
  queryReportData,
  queryTabData,
  diseaseData
} from '@/api/hospital/statisticalreport'
import { exportExcel } from '@/utils/improtFile.js'
import CsTable from '@/components/cs-table'
import reportEchart from './echarts'
export default {
  data() {
    return {
      size: window.SITE_CONFIG.tableSize,
      form: {
        startTime: '',
        finishTime: '',
        classification: '',
        source: ''
      },
      plain1: false,
      plain2: true,
      typeOptions: [],
      sourceOptions: [],
      tabOption: [],
      activeName: '2',
      isShowTable: true,
      isShowEchart: false,
      loading: false,
      isSelection: false,
      tableData: [],
      // tableLabel: [
      //   { label: '类型', param: 'diseaseType', align: 'center', sortable: false, isShow: true },
      //   { label: '病种', param: 'disease', align: 'center', sortable: false, isShow: true },
      //   { label: '发病数(例)', param: 'diseaseNumber', align: 'center', sortable: false, isShow: true },
      //   { label: '发病构成比', param: 'diseaseProportion', align: 'center', sortable: false, isShow: true },
      //   { label: '死亡数', param: 'deathNumber', align: 'center', sortable: false, isShow: true }
      // ],
      tableOption: {},
      code: '2',
      // 统计图数据
      StatisticsData: [],
      title: '病种分布'
    }
  },
  components: {
    CsTable,
    reportEchart
  },
  computed: {
    show() {
      if (this.form.startTime !== '' && this.form.finishTime !== '') {
        return true
      }
    },
    tableLabelType() {
      if (this.code === '2' || this.code === '1') {
        return [
          { label: '类型', param: 'classificationName', align: 'center', sortable: false, isShow: true },
          { label: '病种', param: 'disease', align: 'center', sortable: false, isShow: true },
          { label: '发病数(例)', param: 'diseaseNumber', align: 'center', sortable: false, isShow: true },
          { label: '发病构成比', param: 'diseaseProportion', align: 'center', sortable: false, isShow: true, slot: true },
          { label: '死亡数', param: 'deathNumber', align: 'center', sortable: false, isShow: true }
        ]
      } else if (this.code === '3') {
        return [
          { label: '年龄段(岁)', param: 'classificationName', align: 'center', sortable: false, isShow: true },
          { label: '发病数(例)', param: 'diseaseNumber', align: 'center', sortable: false, isShow: true },
          { label: '发病构成比', param: 'diseaseProportion', align: 'center', sortable: false, isShow: true, slot: true },
          { label: '死亡数', param: 'deathNumber', align: 'center', sortable: false, isShow: true }
        ]
      } else if (this.code === '4') {
        return [
          { label: '性别', param: 'classificationName', align: 'center', sortable: false, isShow: true, slot: true },
          { label: '发病数(例)', param: 'diseaseNumber', align: 'center', sortable: false, isShow: true },
          { label: '发病构成比', param: 'diseaseProportion', align: 'center', sortable: false, isShow: true, slot: true },
          { label: '死亡数', param: 'deathNumber', align: 'center', sortable: false, isShow: true }
        ]
      } else if (this.code === '5') {
        return [
          { label: '人群分类', param: 'classificationName', align: 'center', sortable: false, isShow: true },
          { label: '发病数(例)', param: 'diseaseNumber', align: 'center', sortable: false, isShow: true },
          { label: '发病构成比', param: 'diseaseProportion', align: 'center', sortable: false, isShow: true, slot: true},
          { label: '死亡数', param: 'deathNumber', align: 'center', sortable: false, isShow: true }
        ]
      }
    }
  },
  created() {
    this.handleGetTab()
    this.getDiseaseData(0)
    this.handleTableData()
  },
  methods: {
    // 标签页数据
    handleGetTab() {
      queryTabData().then((res) => {
        if (res.code === 200) this.tabOption = res.data
      })
    },
    // 标签页的点击事件
    handleTabClick(tab, event) {
      this.code = tab.$attrs.code
      this.title = tab.label
      // console.log(this.code)
      this.handleTableData()
    },
    // 控制表格与统计图的显示切换
    handleTableShow() {
      this.plain2 = true
      this.plain1 = false
      this.isShowTable = true
      this.isShowEchart = false
      this.handleTableData()
    },
    // 控制表格与统计图的显示切换
    handleEchartShow() {
      this.plain1 = true
      this.plain2 = false
      this.isShowTable = false
      this.isShowEchart = true
    },
    // 导出功能
    handleExport() {
      if (this.tableData.length === 0) return this.$message.warning("暂无数据导出！")
      const { startTime, finishTime, classification, source } = this.form
      const { pageNo, pageSize, code } = this
      const options = { startTime, finishTime, classification, code }
      if (options.startTime > options.finishTime) return this.$message.warning("开始时间不能大于结束时间！")
      exportExcel('/hp/statistical/checkExport', options, 1).then((res) => {
        console.log('导-出-成-功')
      })
    },
    // 获取表格----全部数据----统计图数据
    handleTableData() {
      const { startTime, finishTime, classification, source } = this.form
      const { pageNo, pageSize, code } = this
      const data = { startTime, finishTime, classification, code }
      if (data.startTime > data.finishTime) return this.$message.warning("开始时间不能大于结束时间！")
      queryReportData(data).then((res) => {
        if (res.code ===200) {
          this.tableData = res.data
          if (res.data === undefined) {
            res.data = []
          } else {
            res.data.forEach(item => {
              if (code === '2') {
                item.name = item.disease
                item.value = item.diseaseNumber
              } else if (code === '3') {
                item.name = item.classificationName + ' 岁'
                item.value = item.diseaseNumber
              } else if (code === '4') {
                item.name = item.classificationName === '1' ? '男' : '女'
                // item.name = item.classificationName
                item.value = item.diseaseNumber
              } else if (code === '5') {
                item.name = item.classificationName
                item.value = item.diseaseNumber
              }
            })
          }
          // console.log(res, '3432')
          // 统计图数据
          if (res.data.length === 0 || code === '1' || res.data === undefined) {
            let data = [{ name: '暂无数据', value: '0' }]
            this.StatisticsData = data
          } else {
            this.StatisticsData = res.data
          }
        }
      })
    },
    // 表格操作栏按钮
    handleButton() {
    },
    // 获取分类数据
    getDiseaseData (id) {
      diseaseData({pid:id}).then(res => {
        if (res.code ===200) this.typeOptions = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .statical_report {
    padding: 10px;
    text-align: left;
    .statical_title {
      position: relative;
    }
    .statical_button {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(0, -50%);
    }
  }
</style>
